<template>
 <!-- 周选择器 -->
  <div class="week-number-select">
    <div class="wrapper">
      <div>
        {{weekString}}
      </div>
      <div class="week-number"
        :class="{'week-number-selected':selectWeeks.has(index)}" 
        v-for="(index) in maxWeek" :key="index" @click="toggleWeek(index)">{{index}}
      </div>
      &emsp;
      <el-popover  width="680" v-if="!disabled">
        <div style="height:38px">
          <span class="float-left" style="line-height:38px">周范围:</span>
          <div class="float-left" style="width:280px;padding:0 30px 0 10px">
            <el-slider v-model="range" range show-stops :min="1" :max="maxWeek">
            </el-slider>
          </div>
          <span class="float-left" style="line-height:38px">
            <WeekTypeSelect v-model="weekMode" type="radio"></WeekTypeSelect>
            &emsp;
            <el-button type="primary" @click="quicklySelect">确定</el-button>
          </span>
        </div>
        <el-button slot="reference" type="text">快速选择</el-button>
      </el-popover> 
    </div>
  </div>
</template>
<script>

import WeekTypeSelect from "./WeekTypeSelect";
import {weekStateToString} from "common/src/utils/arrange";

export default {
  name:"WeekNumberSelect",
  components: {WeekTypeSelect},
  props:{
    value:{ // v-model
      type:Array,
      default:[],
    },
    disabled:{ 
      type:Boolean,
      default: false,
    },
    maxWeek:{ // 一般应从当前学期的周数中获取
      type:Number,
      default: 17,
    }
    
  },
  watch: {
    value(val){
      this.selectWeeks = new Set(this.value);
    }
  },
  data() {
    return {
      selectWeeks: new Set(this.value),
      range:[1,this.maxWeek],
      weekMode:'0'
    }
  },
  methods:{
    handleChange(selectWeeks){
      this.selectWeeks = selectWeeks;
      let arr = Array.from(selectWeeks).sort((a,b)=>a-b)
      this.$emit('change', arr);
    },
    quicklySelect(){
      const selectWeeks = new Set();
      switch (this.weekMode) {
        case '0':
          for (let i = this.range[0]; i <= this.range[1]; i++) {
            selectWeeks.add(i);
          }
          break;
        case '1':
          for (let i = this.range[0]; i <= this.range[1]; i++) {
            if (i&1) { //如果是奇数
              selectWeeks.add(i);
            }
          }
          break;
        case '2':
          for (let i = this.range[0]; i <= this.range[1]; i++) {
            if (!(i&1)) { //如果是偶数
              selectWeeks.add(i);
            }
          }
          break;
      }
      this.handleChange(selectWeeks);
    },
    toggleWeek(weekNum){
      if (this.disabled){
        return;
      }
      const selectWeeks = new Set(this.selectWeeks);
      if (selectWeeks.has(weekNum)){
        selectWeeks.delete(weekNum);
      }else{
        selectWeeks.add(weekNum);
      }
      this.handleChange(selectWeeks);
    }
  }
}
</script>
<style lang="scss" scoped>
.week-number-select{
  .wrapper{
    line-height: 28px;
    width: 100%;
    overflow-x: auto;
    // overflow-y: hidden;
    .week-number{
      cursor: default;
      float: left;
      width: 30px;
      height:28px;
      margin-left: -1px;
      padding: auto;
      text-align: center;
      border-left: 1px solid #ffffff;
      border-right: 1px solid #ffffff;
      background: #DCDFE6
    }

    .week-number-selected{
      color:#ffffff;
      background: #409EFF
    }
    .week-number-head{
      border-top-left-radius: 6px;
      border-bottom-left-radius: 6px
    }
    .week-number-tail{
      border-top-right-radius: 6px;
      border-bottom-right-radius: 6px
    }

  }
}
  
</style>